<template>

  <div class="app-container">
    <!--<el-button style="margin-top: 20px;" @click="dialogAddVisible = true" type="primary" icon="el-icon-upload2">添加banner-->
    <!--</el-button>-->


    <el-table
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column
        prop="createTime"
        label="日期"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
      >
      </el-table-column>

      <el-table-column
        prop="desc"
        label="描述">
      </el-table-column>

      <el-table-column
        label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.image" style="width: 90%;height: 70px;">
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">

          <el-button
            @click="modifyBanner(scope.row)"
            type="text"
            size="small">
            修改
          </el-button>
          <el-button
            @click="deleteBanner(scope.row)"
            type="text"
            size="small">
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-button style="margin-top: 50px;" @click="dialogAddVisible = true" type="primary" icon="el-icon-upload2">添加banner
    </el-button>


    <el-pagination class="pagination-style" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>


    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <span>确认删除</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteSure">确 定</el-button>
  </span>
    </el-dialog>

    <!--add-->
    <el-dialog title="提示" :visible.sync="dialogAddVisible">
      <el-form :model="formDataAdd">
        <el-form-item label="标题">
          <el-input v-model="formDataAdd.title" auto-complete="off" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="formDataAdd.desc" auto-complete="off" placeholder="请输入描述"></el-input>
        </el-form-item>
        <!--http://ss.yprhealth.com-->
        <el-form-item style="margin-top:20px;">
          <el-upload
            class="upload-demo"
            ref="add"
            action="http://ss.yprhealth.com/ops/banner/add"
            :data="formDataAdd"
            :on-success="handleSuccess"
            :on-change="handleChange"
            :show-file-list="false"
            :file-list="fileList1"
          >
            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="提示" :visible.sync="dialogModifyVisible">
      <el-form :model="formDataModify">
        <el-form-item label="标题">
          <el-input v-model="formDataModify.title" auto-complete="off" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="formDataModify.desc" auto-complete="off" placeholder="请输入描述"></el-input>
        </el-form-item>

        <el-form-item style="margin-top:20px;">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://ss.yprhealth.com/ops/banner/update"
            :data="formDataModify"
            :on-progress="updateProgress"
            :on-success="updateSuccess"
            :on-change="updateChange"
            :file-list="fileList2"
            :auto-upload="false"
            style="margin-top:20px;"
          >
            <el-button type="primary">重新上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifySure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getList} from '@/api/table'

  export default {
    name: 'set',
    data() {
      return {
        // 分页参数
        pageSize: 20,
        pageNum: 1,
        currentPage: 1,
        total: 0,
        tableData: [],
        updateData: {title: '测试', desc: '卧槽你大爷'},
        dialogVisible: false,
        dialogModifyVisible: false,
        dialogAddVisible: false,
        bannerId: 0,
        formDataModify: {
          title: '',
          desc: '',
          bannerId: 0,
          sort: 0
        },
        formDataAdd: {
          title: '',
          desc: '',
        },
        ProgressEvent: {},
        fileList1: [],
        fileList2: [],
        updateName: '',
        addName: '',
      }
    },
    created() {
      this.fetchData(this.pageNum)
    },
    methods: {
      fetchData(pageNum) {
        this.$http.post('banner/list', {page: pageNum, pageSize: this.pageSize}).then(data => {
          if (data && data.data && data.data.data) {
            this.tableData = data.data.data.data
          }
        })
      },
      //page
      handleCurrentChange() {
        this.currentPage = val
        this.fetchData(this.currentPage)
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      //add banner
      addSure() {
        if (!this.formDataAdd.title) {
          return this.$message.warning('请输入标题')
        }

        if (!this.formDataAdd.desc) {
          return this.$message.warning('请输入描述')
        }

        if (!this.addName) {
          return this.$message.warning('请选择上传图片')
        }
        this.$refs.add.submit();
      },

      handleChange(event) {
        this.addName = event.name;
      },

      handleSuccess(file) {
        console.log(file)
        this.fetchData(this.pageNum)
        this.dialogAddVisible = false
        this.addName = ''
      },


      //modify Banner
      modifyBanner(item) {
        this.formDataModify.bannerId = item.bannerId
        this.formDataModify.sort = item.sort
        this.formDataModify.jumpType = item.jumpType
        this.formDataModify.title = item.title
        this.formDataModify.desc = item.desc
        this.dialogModifyVisible = true
        console.log(this.formDataModify)
      },
      //修改成功
      updateSuccess(file) {
        this.fetchData(this.currentPage)
        this.dialogModifyVisible = false
        this.updateName = ''
        console.log('updateSuccess ', file)
      },
      updateChange(event, file, fileList) {
        this.updateName = event.name;
        console.log(event.name, file, '3131313')
      },
      modifySure() {
        if (!this.formDataModify.title) {
          return this.$message.warning('请输入标题')
        }

        if (!this.formDataModify.desc) {
          return this.$message.warning('请输入描述')
        }

        if (!this.updateName) {
          // this.$message.warning('请选择上传图片')
          let parmas = {
            bannerId: this.formDataModify.bannerId,
            title: this.formDataModify.title,
            desc: this.formDataModify.desc,
            sort: this.formDataModify.sort,
            jumpType: this.formDataModify.jumpType
          }
          //banner/update
          this.$http.post('banner/update', parmas).then(data => {
            this.fetchData(this.currentPage)
            this.dialogModifyVisible = false
          })
        } else {
          //修改banner
          this.$refs.upload.submit();
        }
      },

      updateProgress(event, file) {
        console.log(event, file)
      },


      //删除 banner
      deleteBanner(item) {
        this.dialogVisible = true
        this.bannerId = item.bannerId
      },
      deleteSure() {
        this.$http.post('banner/delete', {bannerId: this.bannerId}).then(data => {
          this.fetchData(this.pageNum)
          this.dialogVisible = false
        })
      }
    }
  }
</script>


<style scoped>
  .el-upload-list {
    width: 800px !important;
    height: 600px !important;
    margin: 20px auto !important;
  }

  .pagination-style {
    text-align: right;
    margin-top: 18px;
  }

</style>
